import { List, InputItem, WhiteSpace, Button, Toast, WingBlank, } from 'antd-mobile';
import { createForm } from 'rc-form';

const Item = List.Item;
const Brief = Item.Brief;

function offline() {
  Toast.offline('请填写成绩或者语种', 1);
}

class Label extends React.Component {
  render() {
    return (
      <div>
        <List className="my-list">
          <Item multipleLine extra={<div data-index={ this.props.index } class="am-list-extra" onClick={this.props.deleteClick}>删除</div>} >
            { this.props.language } <span>{ this.props.score }</span>
          </Item>
        </List>
        <input name={ this.props.nameL } value={ this.props.language } type='hidden'/>
        <input name={ this.props.nameS } value={ this.props.score } type='hidden'/>
        <WhiteSpace />
      </div>
    )
  }
}

class App extends React.Component {
  state = {
    node: [],
    language: [],
    score: []
  }

  handClick = () =>{
    const language = this.props.form.getFieldValue("language"),
          score = this.props.form.getFieldValue("score")

    if( !language || !score ){
      offline();
      return false;
    }

    this.setState({
      language: this.state.language.concat(language),
      score: this.state.score.concat(score),
      node: this.state.node.concat(Label)
    },function(){
      this.props.form.resetFields()
    })
  }

  deleteClick = (event) =>{
    const index = parseInt(event.target.getAttribute( "data-index" )),
          language = this.state.language,
          score = this.state.score,
          node = this.state.node

    language.splice(index,1)
    score.splice(index,1)
    node.splice(index,1)

    this.setState({
      language: language,
      score: score,
      node: node
    })
  }

  render() {
    const { getFieldProps } = this.props.form;
    const name = this.props.nodeName,
          state = this.state,
          deleteClick = this.deleteClick.bind(this);

    const Node = this.state.node.map(function(fn,index) {
      return <Label 
        score = { state.score[index] } 
        language = { state.language[index] } 
        nameL = { "wgy"+index } 
        nameS = { "wgy"+ index +"cj" }
        deleteClick = { deleteClick }
        index = { index }
        />;
    })

    return (
      <div className={name}>
        <h2 className="step-title">{this.props.title}</h2>
        {Node}

        <List>
          <InputItem
          {...getFieldProps('language')}
          placeholder="请填写语种"
          >语种</InputItem>
        </List>

        <List>
          <InputItem
          {...getFieldProps('score')}
          type="number"
          placeholder="请填写考试成绩"
          >考试成绩</InputItem>
        </List>
        <WhiteSpace />

        <Button className="btn" type="primary" onClick={this.handClick} >添加</Button>
      </div>
    );
  }
}

const Step6 = createForm()(App);

export default Step6
